<template>
  <div class="layout-container">
    <div class="layout-container-form" style="flex-direction: column">
      <div class="layout-container-opt">
        <el-row>
          <el-col :span="24" >
            <!-- "0" 全部权限 1查看权限 2上传权限 3 下载权限 -->
            <el-button v-if="[0,1].indexOf(adminInfo.admin_type)!= -1" type="primary" @click="handleBatchImport">
              批量导入用户账号
            </el-button>
            <el-button
              v-if="[0,1].indexOf(adminInfo.admin_type)!= -1"
              type="primary"
              @click="handleBatchUpdate"
            >
              批量更新用户账号
            </el-button>
          </el-col>
        </el-row>
      </div>
    </div>
    <div class="layout-container-table">
      <Table
        ref="table"
        v-model:page="page"
        v-loading="loading"
        :showSelection="false"
        :data="tableData"
        @getTableData="getTableData"
      >
        <el-table-column prop="user_id" label="用户ID"/>
        <el-table-column prop="team_number" label="团队编号"/>
        <el-table-column prop="user_number" label="编号"/>
        <el-table-column prop="real_name" label="姓名"/>
        <el-table-column prop="phone" label="手机号"/>
        <el-table-column prop="pass_word" label="密码">
          <template #default="scope">
            <div class="pwd-hover">
              <span class="pwd-ciphertext">*********</span>
              <span class="pwd-plaintext">{{Base64.decode(scope.row.pass_word)}}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="img"
          label="头像"
          align="center"
          width="80"
        >
          <template #default="scope">
              <el-image
                v-if="scope.row.avatar"
                style="width: 50px; height: 50px; cursor: pointer;"
                :src="scope.row.avatar"
                :preview-src-list="[scope.row.avatar]"
              />
              <div
                v-else
                style="color: #ccc;text-align:center;line-height:50px; width: 50px; height: 50px;"
              >
                暂无图片
              </div>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" align="center">
          <template #default="scope">
            <div v-if="scope.row.status == 0">
              注销
            </div>
            <div v-if="scope.row.status == 1">
              正常
            </div>
            <div v-if="scope.row.status == 2">
              封禁
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="领取限制">
          <template #default="scope">
            <div v-for="(item) in scope.row.SystemUserRestriction" :key="item.Id">
              {{item.project_id}}、{{item.limit}}题；{{item.lower_limit}}题；
            </div>
          </template>
        </el-table-column>
      </Table>
    </div>
    <!-- 上传文件弹出框组件 -->
    <BatchImportDialog 
      v-if="uploadObj.visible"
      :visible="uploadObj.visible"
      :title="uploadObj.title"
      :uploadObj="uploadObj"
      @closeUploadDialog="closeUploadDialog"
      @refreshTable="refreshTable"/>
  </div>
</template>

<script setup lang="ts">
import { Base64 } from 'js-base64';
import { ossPrefix } from "@/utils/index.ts";
import { defineComponent, ref, reactive } from "vue";
import { Page } from "@/components/table/type";
import { ElMessage, ElMessageBox } from "element-plus";
import Table from "@/components/table/index.vue";
import BatchImportDialog from "@/components/uploadFile/batchImportDialog.vue";
import { batchImportUser, getUserList } from "@/api/service/user.ts"
import { useRouter, useRoute } from 'vue-router'
import { useStore } from 'vuex';
const router = useRouter();
const route = useRoute();
const store = useStore();
const adminInfo = reactive(store.state.user.adminInfo);


// 分页参数, 供table使用
const page: Page = reactive({
  index: 1,
  size: 50,
  total: 0,
});
const loading = ref(false);
const tableData = ref([]);
// 获取表格数据
// params <init> Boolean ，默认为false，用于判断是否需要初始化分页
const getTableData = (init: Boolean) => {
  loading.value = true;
  if (init) {
    page.index = 1;
  }
  let params = {
    page: page.index,
    page_size: page.size,
  };
  getUserList(params)
    .then((res: any) => {
      let data = res.data.list;
      data.forEach((d: any) => {
        d.loading = false;
      });

      tableData.value = data;
      page.total = Number(res.data.count);
    })
    .catch(() => {
      tableData.value = [];
      page.index = 1;
      page.total = 0;
    })
    .finally(() => {
      loading.value = false;
    });
};
getTableData(true);

// 批量导入用户
const uploadObj = reactive({
  fileType: ['.xls', '.xlsx'],
  accept: '.xls, .xlsx', // 文件上传类型
  multiple: false, // 是否支持多选
  visible: false,
  title: '',
  url: '', // 批量导入用户接口地址
  downloadObj: {
    name: '',
    url: ''
  }
});
const handleBatchImport = () => {
  uploadObj.visible = true;
  uploadObj.title = '批量导入用户账号';
  uploadObj.url = '/admin/user/excel/imports';
  uploadObj.downloadObj.name = '用户账号开通表.xlsx'; // excel模板名称
  uploadObj.downloadObj.url = `${ossPrefix}用户账号开通表.xlsx`; // excel模板下载地址
}
// 关闭上传文件弹出框
const closeUploadDialog = () => {
  uploadObj.visible = false;
}

// 批量更新用户信息
const handleBatchUpdate = () => {
  uploadObj.visible = true;
  uploadObj.title = '批量更新用户账号';
  uploadObj.url = '/admin/user/excel/batch_update';
  uploadObj.downloadObj.name = '用户账号信息变更表.xlsx'; // excel模板名称
  uploadObj.downloadObj.url = `${ossPrefix}用户账号信息变更表.xlsx`; // excel模板下载地址
}
// 导入接口成功！
const refreshTable = () => {
  getTableData(true);
}
</script>

<style lang="scss" scoped>
.layout-container-form {
  position: relative;
}
.layout-container-form-search {
  width: 100%;
  display: inline-block !important;
  justify-content: flex-start !important;
  .search-btn{
    margin-right: 10px;;
  }
}
.notice-title{
  margin-bottom: 10px;
}
.notice-content{
  width:100%;
  min-height:50px;
  padding:10px;
  box-sizing: border-box;
  background: #ebebeb;
  border: 1px solid #ccc;
  border-radius: 2px;
  margin-bottom: 10px;
  color: #929292;
}
.pwd-ciphertext{
  display: block;
  color: #409EFF;
  
}
.pwd-plaintext{
  display: none;
}

.pwd-hover:hover{
  cursor: pointer;
  .pwd-ciphertext{
    display: none;
    cursor: pointer;
  }
  .pwd-plaintext{
    display: block;
    cursor: pointer;
  }
}

.layout-container-opt {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 5px;
  margin-top: 5px;
}
.split-line{
  margin: 0 8px;
  color: #ccc;
}


</style>
